import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// import {sendAction} from '../../store/action'//node导出变量名必须用{}包裹
import { connect } from 'react-redux'
import { Layout, Card, Pagination } from 'element-react';


import './mv.css'

class Mv extends Component {
  state = {
    mv: []
  };
  // 组件加载完毕
  componentDidMount() {
    //  store.subscribe(()=>{
    //    console.log(store.getState());
    //  })
    this.getMvData();
  }
  // 点我按钮
  handleClick = () => {
    // const sendActionData = sendAction();
    // store.dispatch(sendActionData);
    console.log(this.props)
    this.props.sendAction()
  }
  getMvData = () => {
    let that = this;
    that.$post(that.$api.allMv).then(res => {
      if (res.code === 200) {
        let { mv } = that.state;
        that.setState({
          mv: res.data
        }, r => {
          console.log(that.state.mv)
        });

      }
    });
  }
  render() {
    const { mv } = this.state;
    return (
      <div className="home">
        <Layout.Row className='container'>
          {
            mv.map((item, index) => {
              return <Layout.Col key={index} span={6} offset={0}>
                <Link to={`/mvDetail/${item.id}`} >
                  <Card bodyStyle={{ position: 'relative', padding: 0, }}>
                    <img src={item.cover} className="image" />
                    <div className="card-bottom" style={{ padding: 10 }}>
                      <span className="card-title">{item.name}</span>
                      <div className="bottom clearfix">
                        <time className="time">2016-10-21 16:19</time>
                      </div>
                    </div>
                  </Card>
                </Link>
              </Layout.Col>
            })
          }
        </Layout.Row>
        <div className="container pages">
          <Pagination layout="prev, pager, next" total={100} />
        </div>

      </div>
    );
  }
}
// 发送数据
const mapDispatchToProps = (dispatch) => {
  return {
    sendAction: () => {
      dispatch({
        type: 'send_action',
      });
    }
  }
}
export default connect(null, mapDispatchToProps)(Mv);
